<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	.lvse{
		color: green;
		display: none;
	}
	.hongse{
		color: red;
		display: none;
	}
</style>

<script type="text/javascript">
	
	window.onload = function(){
		var uname = document.getElementById('uname');
		var ok = document.getElementById('unameOK');
		var no = document.getElementById('unameNO');
		uname.onblur = function(){
			var con = uname.value;//抓到表单的内容
			var reg = /[0-9a-z]{4,20}/i;//定义正则规则
			var r = reg.test(con);//匹配用户输入的内容是否正确
			if(r){
				ok.style.display = 'inline';
				no.style.display = 'none';
			}else{
				no.style.display = 'inline';
				ok.style.display = 'none';
			}
		}
	}


</script>
</head>

<body>
	用户名：<input type="text" name="" id="uname" />
	<span id="unameOK" class="lvse">可以注册</span>
	<span id="unameNO" class="hongse">用户名必须是4-20位纯字母，请修改后提交</span>
	
	
</body>
</html>
